<template>
  <div class="layout">
    <el-container>
      <!-- <el-aside>
        <el-menu router :default-active="$route.fullPath.split('?')[0]">
          <el-menu-item-group
            :title="item.meta && item.meta.Title"
            v-for="(item, index) in $router.options.routes"
            :key="index"
          >
          </el-menu-item-group>
        </el-menu>
      </el-aside> -->
      <el-main>
        <el-header>
          <div class="head_right">
            <el-dropdown trigger="click" @command="handleCommand">
              <div class="el-dropdown-link">
                <el-avatar :src="require('../assets/avatar.jpg')"></el-avatar>
                测试名字
                <i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="LoginOut">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-container class="container">
          <!-- <keep-alive>
            <router-view :key="$route.fullPath" />
          </keep-alive> -->
          <orderList />
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import orderList from './orderList.vue'
export default {
  components: { orderList },
  methods: {
    handleCommand (command) {
      switch (command) {
        case 'LoginOut': // 注销
          console.log('退出', command)
          break

        default:
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
.layout {
  .el-aside {
    width: 200px !important;
    height: 100vh;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  }
  .el-main {
    padding: 0;
    background: #f4f5f9;
    display: flex;
    flex-direction: column;
    .el-header {
      height: 52px !important;
      background-color: #fff;
      .head_right {
        min-width: 164px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        overflow: hidden;
        .el-dropdown-link {
          display: flex;
          align-items: center;
          user-select: none;
          cursor: pointer;

          .el-avatar {
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
        }
      }
    }
    .container {
      padding: 16px 16px 0 16px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
